<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/sqlbt.css">
    <link rel="stylesheet" href="css/xxk.css">
    <!-- <script src="./js/index.js"></script> -->
    <title>index</title>
    <script src="./libs/jquery.js"></script>

</head>
<body>
    <!-- 顶部提醒 -->
    <div class="caution floor" >
    </div>

    <!-- 开始动画 -->
    <div class="imgTop">
    </div>

    <!-- 楼层 -->
    <div class="louceng">
        <ul id="LouDao">
            <li>顶部</li>
            <li>导航栏</li>
            <li>全场包邮</li>
            <li>文学图书</li>
        </ul>
        <script>
          $("#LouDao").children("li").click(function(){
        $("html").animate({
            scrollTop: $(".floor").eq($(this).index()).offset().top
        })
    })
</script>

    
    </div>

    <!-- 登录注册 -->
    <div class="topBar" id="louceng1">
    </div>

    <!-- logo行 -->
    <div class="searchBar">
    </div>

    <!-- 导航栏 -->
    <div class="nav floor" id="louceng2" >
    </div>



    <!-- 内容 -->
    <div class="content">
        <div class="content-1">
            <div class="content-1-left">
                <ul class="content-left-ul">
                    <li class="content-left-li">
                        <div class="content-info">
                            <h3 class="content-info-h3">
                                <a href="./list.html">文学</a>
                            </h3>
                            <p>
                                <a href="./list.html">小说</a>
                                <a href="./list.html">青春文学</a>
                                <a href="./list.html"> 中国散文</a>
                                <a href="./list.html">外国散文</a>
                                <a href="./list.html">悬疑推理</a><br>
                                <a href="./list.html">文学理论</a>
                                <a href="./list.html">文集</a>
                                <a href="./list.html">世界名著</a>
                            </p>
                        </div>
                    </li>
                    <li class="content-left-li">
                        <div class="content-info">
                            <h3 class="content-info-h3">
                                <a href="./list.html">社科</a>
                            </h3>
                            <p>
                                <a href="./list.html">历史</a>
                                <a href="./list.html">哲学/宗教</a>
                                <a href="./list.html">社会科学</a>
                                <a href="./list.html">政治军事</a>
                                <a href="./list.html">传记</a><br>
                                <a href="./list.html">文化</a>
                                <a href="./list.html">古籍</a>
                                <a href="./list.html">管理</a>
                                <a href="./list.html">经济</a>
                                <a href="./list.html">成功励志</a>
                                <a href="./list.html">法律</a>
                                <a href="./list.html">语言文字</a>
                            </p>
                        </div>
                    </li>
                    <li class="content-left-li">
                        <div class="content-info">
                            <h3 class="content-info-h3">
                                <a href="./list.html">少儿</a>
                            </h3>
                            <p>
                                <a href="./list.html">中国儿童文学</a>
                                <a href="./list.html">外国儿童文学</a>
                                <a href="./list.html">科普读物</a>
                                <a href="./list.html">绘本</a><br>
                                <a href="./list.html">动漫/卡通</a><br>
                                <a href="./list.html">幼儿启蒙</a>
                            </p>
                        </div>
                    </li>
                    <li class="content-left-li">
                        <div class="content-info">
                            <h3 class="content-info-h3">
                                <a href="./list.html">艺术</a>
                            </h3>
                            <p>
                                <a href="./list.html">绘画</a>
                                <a href="./list.html">书法篆刻</a>
                                <a href="./list.html">艺术理论</a>
                                <a href="./list.html">摄影</a>
                                <a href="./list.html">音乐</a><br>
                            </p>
                        </div>
                    </li>
                    <li class="content-left-li">
                        <div class="content-info">
                            <h3 class="content-info-h3">
                                <a href="./list.html">生活</a>
                            </h3>
                            <p>
                                <a href="./list.html">美食</a>
                                <a href="./list.html">保健/心理健康</a>
                                <a href="./list.html">旅游</a>
                                <a href="./list.html">家庭教育</a>
                                <a href="./list.html">家居休闲</a><br>
                            </p>
                            <em></em>
                        </div>
                    </li>
                    <li class="content-left-li">
                        <div class="content-info">
                            <h3 class="content-info-h3">
                                <a href="./list.html">文教</a>
                            </h3>
                            <p>
                                <a href="./list.html">中小学教辅</a>
                                <a href="./list.html">外语</a>
                                <a href="./list.html">教材</a><br>
                                <a href="./list.html">医学</a>
                                <a href="./list.html">计算机</a><br>
                                <a href="./list.html">自然科学</a>
                            </p>
                        </div>
                    </li>
                    <li class="content-left-li">
                        <div class="content-info">
                            <h3 class="content-info-h3">
                                <a href="./list.html">文创</a>
                            </h3>
                            <p>
                                <a href="./list.html">笔记本</a>
                                <a href="./list.html">布艺品</a>
                                <a href="./list.html">书签/藏书票</a>
                            </p>
                        </div>
                    </li>
                    <p class="content-left-ul-p">
                        <a href="./list.html" class="content-left-ul-p-a">全部商品分类>></a>
                    </p>
                </ul>

                <!-- 文学插入 -->
                <div class="tag1">
                    
                    <div class="tag1-box">
                        <span>小说</span>
                        <ul>
                            <li><a href="./list.html">外国小说</a></li>
                            <li><a href="./list.html">中国当代小说</a></li>
                            <li><a href="./list.html">中国古典小说</a></li>
                            <li><a href="./list.html">中国近现代小说</a></li>
                            <li><a href="./list.html">悬疑推理</a></li>
                            <li><a href="./list.html">科幻小说</a></li>
                            <li><a href="./list.html">世界名著</a></li>
                            <li><a href="./list.html">四大名著</a></li>
                            <li><a href="./list.html">作品集</a></li>
                            <li style="border: none;"><a href="#">更多</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box">
                        <span>文学</span>
                        <ul>
                            <li><a href="./list.html">外国诗歌</a></li>
                            <li><a href="./list.html">中国古诗词</a></li>
                            <li><a href="./list.html">中国现当代诗歌</a></li>
                            <li><a href="./list.html">外国散文</a></li>
                            <li><a href="./list.html">中国现代散文</a></li>
                            <li><a href="./list.html">中国古代散文</a></li>
                            <li><a href="./list.html">文学理论</a></li>
                            <li><a href="./list.html">文集</a></li>
                            <li><a href="./list.html">戏剧</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>青春文学</span>
                        <ul>
                            <li><a href="./list.html">玄幻/科幻</a></li>
                            <li><a href="./list.html">悬疑/惊悚</a></li>
                            <li><a href="./list.html">叛逆/成长</a></li>
                            <li><a href="./list.html">爆笑/无厘头</a></li>
                            <li><a href="./list.html">校园</a></li>
                            <li><a href="./list.html">港台青春文学</a></li>
                            <li><a href="./list.html">外国青春文学</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 社科插入 -->
                <div class="tag2">
                    
                    <div class="tag1-box">
                        <span>历史</span>
                        <ul>
                            <li><a href="./list.html">外国小说</a></li>
                            <li><a href="./list.html">世界史</a></li>
                            <li><a href="./list.html">地方史志</a></li>
                            <li><a href="./list.html">历史知识读物</a></li>
                            <li><a href="./list.html">史料典籍</a></li>
                            <li><a href="./list.html">史学理论</a></li>
                            <li><a href="./list.html">考古文物</a></li>
                            <li style="border: none;"><a href="./list.html">民族史志</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box">
                        <span>政治</span>
                        <ul>
                            <li><a href="./list.html">政治</a></li>
                            <li><a href="./list.html">军事</a></li>
                            <li><a href="./list.html">中国政治</a></li>
                            <li><a href="./list.html">国际政治</a></li>
                            <li><a href="./list.html">外交/国际关系</a></li>
                            <li><a href="./list.html">哲学</a></li>
                            <li><a href="./list.html">宗教</a></li>
                            <li><a href="./list.html">美学</a></li>
                            <li><a href="./list.html">哲学知识读物</a></li>
                            <li style="border: none;"><a href="./list.html">中国古代哲学</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" >
                        <span>传记</span>
                        <ul>
                            <li><a href="./list.html">历代帝王</a></li>
                            <li><a href="./list.html">历史人物</a></li>
                            <li><a href="./list.html">科学家</a></li>
                            <li><a href="./list.html">体育明星</a></li>
                            <li><a href="./list.html">文学家</a></li>
                            <li><a href="./list.html">学者</a></li>
                            <li><a href="./list.html">艺术家</a></li>
                            <li><a href="./list.html">文娱明星</a></li>
                            <li><a href="./list.html">政治人物</a></li>
                            <li><a href="./list.html">自传</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" >
                        <span>文化</span>
                        <ul>
                            <li><a href="./list.html">世界文化</a></li>
                            <li><a href="./list.html">中国文化</a></li>
                            <li><a href="./list.html">中国民俗</a></li>
                            <li><a href="./list.html">地域文化</a></li>
                            <li><a href="./list.html">文化理论</a></li>
                            <li><a href="./list.html">文化评述</a></li>
                            <li style="border: none;"><a href="./list.html">神秘现象</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" >
                        <span>社会科学</span>
                        <ul>
                            <li><a href="./list.html">心理学</a></li>
                            <li><a href="./list.html">人类学</a></li>
                            <li><a href="./list.html">教育</a></li>
                            <li><a href="./list.html">社会学</a></li>
                            <li><a href="./list.html">新闻传播出版</a></li>
                            <li><a href="./list.html">语言文字</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" >
                        <span>古籍</span>
                        <ul>
                            <li><a href="./list.html">古籍整理</a></li>
                            <li><a href="./list.html">经部</a></li>
                            <li><a href="./list.html">史类</a></li>
                            <li><a href="./list.html">子部</a></li>
                            <li style="border: none;"><a href="./list.html">集部</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" >
                        <span>经济/管理</span>
                        <ul>
                            <li><a href="./list.html">经济理论</a></li>
                            <li><a href="./list.html">中国经济</a></li>
                            <li><a href="./list.html">国际经济</a></li>
                            <li><a href="./list.html">经济通俗读物</a></li>
                            <li><a href="./list.html">保险</a></li>
                            <li><a href="./list.html">会计</a></li>
                            <li><a href="./list.html">金融投资</a></li>
                            <li><a href="./list.html">市场营销</a></li>
                            <li><a href="./list.html">管理学</a></li>
                            <li style="border: none;"><a href="./list.html">电子商务</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" >
                        <span>成功励志</span>
                        <ul>
                            <li><a href="./list.html">成功激励</a></li>
                            <li><a href="./list.html">口才演讲</a></li>
                            <li><a href="./list.html">名人励志</a></li>
                            <li><a href="./list.html">人际交往</a></li>
                            <li><a href="./list.html">人生哲学</a></li>
                            <li><a href="./list.html">心灵修养</a></li>
                            <li><a href="./list.html">性格习惯</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>法律</span>
                        <ul>
                            <li><a href="./list.html">法的理论</a></li>
                            <li><a href="./list.html">法律法规</a></li>
                            <li><a href="./list.html">国际法</a></li>
                            <li><a href="./list.html">经济法</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 少儿插入 -->
                <div class="tag3">
                    
                    <div class="tag1-box">
                        <span>儿童文学</span>
                        <ul>
                            <li><a href="./list.html">中国儿童文学</a></li>
                            <li><a href="./list.html">外国儿童文学</a></li>
                            <li><a href="./list.html">童话</a></li>
                            <li><a href="./list.html">小说</a></li>
                            <li style="border: none;"><a href="./list.html">寓言传说</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box">
                        <span>绘本</span>
                        <ul>
                            <li style="border: none;"><a href="./list.html">动漫/卡通</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>科普百科</span>
                        <ul>
                            <li><a href="./list.html">科普</a></li>
                            <li><a href="./list.html">百科</a></li>
                            <li><a href="./list.html">历史读物</a></li>
                            <li><a href="./list.html">生活常识</a></li>
                            <li><a href="./list.html">益智游戏</a></li>
                            <li style="border: none;"><a href="./list.html">传统文化</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>其他</span>
                        <ul>
                            <li><a href="./list.html">儿童启蒙</a></li>
                            <li><a href="./list.html">少儿英语</a></li>
                            <li><a href="./list.html">励志/成长</a></li>
                            <li style="border: none;"><a href="./list.html">艺术课堂</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>年龄馆</span>
                        <ul>
                            <li><a href="./list.html">0-2岁</a></li>
                            <li><a href="./list.html">3-6岁</a></li>
                            <li style="border: none;"><a href="./list.html">7岁及以上</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 艺术插入 -->
                <div class="tag4">
                    
                    <div class="tag1-box">
                        <span>绘画</span>
                        <ul>
                            <li><a href="./list.html">绘画理论</a></li>
                            <li><a href="./list.html">国画</a></li>
                            <li><a href="./list.html">油画</a></li>
                            <li><a href="./list.html">素描速写</a></li>
                            <li style="border: none;"><a href="./list.html">水粉水彩</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box">
                        <span>书法篆刻</span>
                        <ul>
                            <li><a href="./list.html">碑帖</a></li>
                            <li><a href="./list.html">技法教程</a></li>
                            <li><a href="./list.html">书法理论</a></li>
                            <li><a href="./list.html">硬笔书法</a></li>
                            <li><a href="./list.html">字帖</a></li>
                            <li style="border: none;"><a href="./list.html">篆刻</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>摄影/设计</span>
                        <ul>
                            <li><a href="./list.html">设计</a></li>
                            <li><a href="./list.html">摄影后期</a></li>
                            <li><a href="./list.html">摄影教程</a></li>
                            <li><a href="./list.html">摄影理论</a></li>
                            <li><a href="./list.html">摄影器材</a></li>
                            <li><a href="./list.html">数码摄影</a></li>
                            <li style="border: none;"><a href="./list.html">作品集</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>舞台影视艺术</span>
                        <ul>
                            <li><a href="./list.html">影视理论</a></li>
                            <li><a href="./list.html">影视赏析</a></li>
                            <li><a href="./list.html">影视制作</a></li>
                            <li style="border: none;"><a href="./list.html">舞台/戏曲艺术</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>音乐</span>
                        <ul>
                            <li><a href="./list.html">感情</a></li>
                            <li><a href="./list.html">吉他</a></li>
                            <li><a href="./list.html">理论/欣赏</a></li>
                            <li><a href="./list.html">声乐</a></li>
                            <li><a href="./list.html">通俗音乐</a></li>
                            <li><a href="./list.html">外国音乐</a></li>
                            <li><a href="./list.html">中国民族音乐</a></li>
                            <li style="border: none;"><a href="./list.html">作曲/指挥</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>收藏鉴赏</span>
                        <ul>
                            <li><a href="./list.html">宝石</a></li>
                            <li><a href="./list.html">雕品</a></li>
                            <li><a href="./list.html">古代家具</a></li>
                            <li><a href="./list.html">钱币</a></li>
                            <li><a href="./list.html">收藏百科</a></li>
                            <li><a href="./list.html">收藏随笔</a></li>
                            <li><a href="./list.html">书画</a></li>
                            <li><a href="./list.html">陶瓷</a></li>
                            <li style="border: none;"><a href="./list.html">玉器</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>更多</span>
                        <ul>
                            <li><a href="./list.html">艺术理论</a></li>
                            <li><a href="./list.html">雕塑</a></li>
                            <li><a href="./list.html">工艺美术</a></li>
                            <li><a href="./list.html">建筑艺术</a></li>
                            <li><a href="./list.html">民间艺术</a></li>
                            <li><a href="./list.html">人体艺术</a></li>
                            <li style="border: none;"><a href="./list.html">艺术类考试</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 生活插入 -->
                <div class="tag5">
                    
                    <div class="tag1-box">
                        <span>美食</span>
                        <ul>
                            <li><a href="./list.html">饮食文化</a></li>
                            <li><a href="./list.html">保健食谱</a></li>
                            <li><a href="./list.html">家常食谱</a></li>
                            <li><a href="./list.html">八大菜系</a></li>
                            <li><a href="./list.html">餐饮指南</a></li>
                            <li><a href="./list.html">世界美食</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box">
                        <span>保健/心里健康</span>
                        <ul>
                            <li><a href="./list.html">健康百科</a></li>
                            <li><a href="./list.html">健身</a></li>
                            <li><a href="./list.html">心理健康</a></li>
                            <li><a href="./list.html">中老年</a></li>
                            <li><a href="./list.html">中医保健</a></li>
                            <li><a href="./list.html">常见病</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>旅游</span>
                        <ul>
                            <li><a href="./list.html">旅游随笔</a></li>
                            <li><a href="./list.html">旅游攻略</a></li>
                            <li><a href="./list.html">旅游画册</a></li>
                            <li><a href="./list.html">城市自助游</a></li>
                            <li><a href="./list.html">国内自助游</a></li>
                            <li><a href="./list.html">国外自助游</a></li>
                            <li><a href="./list.html">地图地理</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>孕产育儿</span>
                        <ul>
                            <li><a href="./list.html">孕产百科</a></li>
                            <li><a href="./list.html">育儿百科</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>更多</span>
                        <ul>
                            <li><a href="./list.html">美丽妆扮</a></li>
                            <li><a href="./list.html">两性关系</a></li>
                            <li><a href="./list.html">家居休闲</a></li>
                            <li style="border: none;"><a href="./list.html">个人理财</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 文教插入 -->
                <div class="tag6">
                    
                    <div class="tag1-box">
                        <span>中小学教辅</span>
                        <ul>
                            <li><a href="./list.html">语文阅读</a></li>
                            <li><a href="./list.html">拓展读物</a></li>
                            <li><a href="./list.html">高考</a></li>
                            <li><a href="./list.html">初中通用</a></li>
                            <li><a href="./list.html">高中通用</a></li>
                            <li><a href="./list.html">工具书</a></li>
                            <li><a href="./list.html">教师用书</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box">
                        <span>外语</span>
                        <ul>
                            <li><a href="./list.html">英语读物</a></li>
                            <li><a href="./list.html">职业英语</a></li>
                            <li><a href="./list.html">英语考试</a></li>
                            <li><a href="./list.html">大学英语</a></li>
                            <li><a href="./list.html">少儿英语</a></li>
                            <li style="border: none;"><a href="./list.html">更多</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>教材</span>
                        <ul>
                            <li><a href="./list.html">研究生/本科/专科教材</a></li>
                            <li><a href="./list.html">职业技术培训</a></li>
                            <li style="border: none;"><a href="./list.html">中小学教材</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>计算机</span>
                        <ul>
                            <li><a href="./list.html">操作系统/系统开发</a></li>
                            <li><a href="./list.html">数据库</a></li>
                            <li><a href="./list.html">信息安全</a></li>
                            <li><a href="./list.html">程序设计</a></li>
                            <li><a href="./list.html">电脑杂志</a></li>
                            <li><a href="./list.html">计算机教材</a></li>
                            <li><a href="./list.html">计算机考试认证</a></li>
                            <li><a href="./list.html">计算机理论</a></li>
                            <li><a href="./list.html">计算机体系结构</a></li>
                            <li><a href="./list.html">家庭与办公室用书</a></li>
                            <li><a href="./list.html">企业软件开发与实施</a></li>
                            <li><a href="./list.html">人工智能</a></li>
                            <li style="border: none;"><a href="./list.html">软件工程/开发项目管理</a></li>
                        </ul>
                    </div>
                    <div class="tag1-box" style="margin-bottom: 0px;">
                        <span>更多</span>
                        <ul>
                            <li><a href="./list.html">考试</a></li>
                            <li><a href="./list.html">家庭教育</a></li>
                            <li><a href="./list.html">自然科学</a></li>
                            <li><a href="./list.html">科普读物</a></li>
                            <li><a href="./list.html">医学</a></li>
                            <li><a href="./list.html">农林业</a></li>
                            <li><a href="./list.html">工业技术</a></li>
                            <li style="border: none;"><a href="./list.html">建筑</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 文创插入 -->
                <div class="tag7">
                    <div class="tag1-box">
                        <span>文创</span>
                        <ul>
                            <li><a href="./list.html">笔记本</a></li>
                            <li><a href="./list.html">布艺品</a></li>
                            <li><a href="./list.html">书签/藏书票</a></li>
                            <li><a href="./list.html">明信片</a></li>
                            <li><a href="./list.html">笺纸</a></li>
                            <li><a href="./list.html">胶带</a></li>
                            <li style="border: none;"><a href="./list.html">其它</a></li>
                        </ul>
                    </div>
                </div>

                <script>
                    const clUl = document.querySelectorAll(".content-left-ul li");
                    const tag1 = document.querySelector(".tag1");
                    const tag2 = document.querySelector(".tag2");
                    const tag3 = document.querySelector(".tag3");
                    const tag4 = document.querySelector(".tag4");
                    const tag5 = document.querySelector(".tag5");
                    const tag6 = document.querySelector(".tag6");
                    const tag7 = document.querySelector(".tag7");
                    console.log(clUl.length);
                    for(let i = 0;i<clUl.length;i++){
                        clUl[i].a = i;
                        clUl[i].onmouseover = function(){
                            console.log(clUl[i].a);
                            switch(clUl[i].a){
                                case 0:tag1.style.display = "block";
                                clUl[i].style.width = "210px"
                                break;
                                case 1:tag2.style.display = "block";break;
                                case 2:tag3.style.display = "block";break;
                                case 3:tag4.style.display = "block";break;
                                case 4:tag5.style.display = "block";break;
                                case 5:tag6.style.display = "block";break;
                                case 6:tag7.style.display = "block";break;
                            }
                        }

                        clUl[i].onmouseout = function(){
                            switch(clUl[i].a){
                                case 0:tag1.style.display = "none";break;
                                case 1:tag2.style.display = "none";break;
                                case 2:tag3.style.display = "none";break;
                                case 3:tag4.style.display = "none";break;
                                case 4:tag5.style.display = "none";break;
                                case 5:tag6.style.display = "none";break;
                                case 6:tag7.style.display = "none";break;
                            }
                        }
                    }
                    // 1
                    tag1.onmouseover = function(){
                        tag1.style.display = "block"
                    }
                    tag1.onmouseout = function(){
                        tag1.style.display = "none";
                    }
                    //2
                    tag2.onmouseover = function(){
                        tag2.style.display = "block"
                    }
                    tag2.onmouseout = function(){
                        tag2.style.display = "none";
                    }
                    // 3
                    tag3.onmouseover = function(){
                        tag3.style.display = "block"
                    }
                    tag3.onmouseout = function(){
                        tag3.style.display = "none";
                    }
                    // 4
                    tag4.onmouseover = function(){
                        tag4.style.display = "block"
                    }
                    tag4.onmouseout = function(){
                        tag4.style.display = "none";
                    }
                    // 5
                    tag5.onmouseover = function(){
                        tag5.style.display = "block"
                    }
                    tag5.onmouseout = function(){
                        tag5.style.display = "none";
                    }
                    // 6
                    tag6.onmouseover = function(){
                        tag6.style.display = "block"
                    }
                    tag6.onmouseout = function(){
                        tag6.style.display = "none";
                    }
                    // 7
                    tag7.onmouseover = function(){
                        tag7.style.display = "block"
                    }
                    tag7.onmouseout = function(){
                        tag7.style.display = "none";
                    }


                    
                </script>
                
            </div>
            <div class="content-1-right">
                <div class="lbt-box">
                    <div class="lbt">
                        <!-- ----轮播图代码------ -->
                        <div id="dBox">
                            <div id="sbox">
                                <span class="sl"><<<</span>
                                <span class="sr">>>></span>
                            </div>
                            <div id="box">
                                <img src="img/1.jpg" alt="" srcset="">
                                <img src="img/2.jpg" alt="" srcset="">
                                <img src="img/3.jpg" alt="" srcset="">
                                <img src="img/4.jpg" alt="" srcset="">
                                <img src="img/5.jpg" alt="" srcset="">
                                <img src="img/6.jpg" alt="" srcset="">
                                <img src="img/7.jpg" alt="" srcset="">
                                <img src="img/8.jpg" alt="" srcset="">
                                <img src="img/1.jpg" alt="" srcset="">
                            </div>
                            <div id="ali">
                                <ul>
                                </ul>
                            </div>
                        </div>
                        <script type="text/javascript" src="./js/move.js"></script>
<script>
function lbt(){
    this.dBox = document.getElementById("dBox");
    this.sl = document.querySelector(".sl");
    this.sr = document.querySelector(".sr");
    this.img = document.querySelectorAll("#box img");
    this.box = document.getElementById("box");
    this.oul = document.querySelector("#ali ul");
    this.index = 0;
    this.t = null;
    this.p = null;
    this.addEvent();
    this.box.style.width = (this.img.length * 1000) + "px";
}
lbt.prototype.addEvent = function(){
    const that = this;
    this.sl.onclick = function(){
        that.changeIndexLeft();
    }
    this.sr.onclick = function(){
        that.changeIndexRight();
    }
    this.zd();
    this.yd();
    this.over();
    this.out();
}
lbt.prototype.yd = function(){
    let that = this;
    for(let i = 0; i<this.img.length - 1;i++){
        this.li = document.createElement("li");
        this.oul.style.width = i * 35  + "px";
        this.oul.appendChild(this.li);
    }
    this.ali = document.querySelectorAll("#ali li");
}
lbt.prototype.over = function(){
    let that = this;
    for(let i =0;i<this.ali.length;i++){
        that.i = i;
    this.ali[i].onmouseover = function(){
        clearInterval(that.t)
        console.log(i);
        that.index = i ;
        that.ali[i].style.border = "1px solid #fff";
        that.ali[i].style.background = "greenyellow";
        that.render2();
        that.p = setTimeout(function(){
            that.zd();
        },3000)
        }
    }
} 
lbt.prototype.out = function(){
    let that = this;
    for(let i =0;i<this.ali.length;i++){
        that.i = i;
    this.ali[i].onmouseleave = function(){
        clearTimeout(that.p)
        that.ali[i].style.border = "3px black solid";
        that.ali[i].style.background = "lightblue";
        that.zd();
        }
    }
}
lbt.prototype.changeIndexLeft = function(){
    clearInterval(this.t)
    if(this.index == 0){
        this.index = this.img.length-2;
        this.box.style.left = -(this.img[0].offsetWidth * (this.index + 1)) + "px";
    }else{
        this.index--;
    }
    this.render();
    this.zd();
}
lbt.prototype.changeIndexRight = function(){
    clearInterval(this.t)
    if(this.index == this.img.length-1){
        this.index = 1;
        this.box.style.left = -(this.img[0].offsetWidth * (this.index - 1)) + "px";
    }else{
        this.index++;
    }
    this.render();
    this.zd();
}
lbt.prototype.zd = function(){
    clearInterval(this.t);
    this.t = setInterval(() => {
        if(this.index == this.img.length-1){
        this.index = 1;
        this.box.style.left = -(this.img[0].offsetWidth * (this.index - 1)) + "px";
    }else{
        this.index++;
    }
        this.render();
    }, 2000);
}
lbt.prototype.render = function(){
    move(this.box,{
        left:-(this.index * this.img[0].offsetWidth), 
    });
}
lbt.prototype.render2 = function(){
        this.box.style.left=-(this.index * this.img[0].offsetWidth) + "px"; 
}
new lbt();
</script>


                        <!-- ----轮播图代码------ -->
                    </div>
                </div>
                <div class="content-1-right-bottom">
                    <div class="content-1-right-bottom-left">
                        <div class="content-xxk">
                            <!-- ------选项卡---------- -->
                            <div class="box">
                                <ul>
                                    <li class="active">家电</li>
                                    <li>日用</li>
                                    <li>厨卫</li>
                                    <li>灯具</li>
                                </ul>
                                <div class="cont">
                                    <div class="cont1">
                                        <div class="tabConList">
                                            <div class="tabConList-t">
                                                <div  class="tabConList-t-l">
                                                    <a href="#"><img src="http://image12.bookschina.com/2018/20180604/s7801339.jpg" alt=""></a>
                                                </div>
                                                <div  class="tabConList-t-r">
                                                    <div class="tabConList-t-r-d1"><a href="#">人间须尽欢</a></div>
                                                    <span class="tabConList-t-r-s1">¥14.9</span><s class="tabConList-t-r-s2">¥45.0</s>
                                                    <div class="tabConList-t-r-d2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;众多读者赞誉“大器晚成的小品文大家”，继汪曾祺之后极富人情味和生活智趣的文字。本书精选四十余篇文章，均为近几年被文友和读者广为推崇的口碑作品。高军的文，简洁酣畅，小生活中见大道理，犀利深刻却幽默有趣，调侃间却情致动人。他的作品给人的感受，似乎无论生活在何种年代何种环境，他总能发现与感受到生活的真美意趣。</div>
                                                </div>
                                            </div>
                                            <div class="tabConList-b">
                                                <ul class="tabConList-b-u">
                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>






                                    <div class="cont2">
                                        <div class="tabConList">
                                            <div class="tabConList-t">
                                                <div  class="tabConList-t-l">
                                                    <a href="#"><img src="http://image12.bookschina.com/2018/20180604/s7801339.jpg" alt=""></a>
                                                </div>
                                                <div  class="tabConList-t-r">
                                                    <div class="tabConList-t-r-d1"><a href="#">人间须尽欢</a></div>
                                                    <span class="tabConList-t-r-s1">¥14.9</span><s class="tabConList-t-r-s2">¥45.0</s>
                                                    <div class="tabConList-t-r-d2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;众多读者赞誉“大器晚成的小品文大家”，继汪曾祺之后极富人情味和生活智趣的文字。本书精选四十余篇文章，均为近几年被文友和读者广为推崇的口碑作品。高军的文，简洁酣畅，小生活中见大道理，犀利深刻却幽默有趣，调侃间却情致动人。他的作品给人的感受，似乎无论生活在何种年代何种环境，他总能发现与感受到生活的真美意趣。</div>
                                                </div>
                                            </div>
                                            <div class="tabConList-b">
                                                <ul class="tabConList-b-u">
                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cont3">
                                        <div class="tabConList">
                                            <div class="tabConList-t">
                                                <div  class="tabConList-t-l">
                                                    <a href="#"><img src="http://image12.bookschina.com/2018/20180604/s7801339.jpg" alt=""></a>
                                                </div>
                                                <div  class="tabConList-t-r">
                                                    <div class="tabConList-t-r-d1"><a href="#">人间须尽欢</a></div>
                                                    <span class="tabConList-t-r-s1">¥14.9</span><s class="tabConList-t-r-s2">¥45.0</s>
                                                    <div class="tabConList-t-r-d2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;众多读者赞誉“大器晚成的小品文大家”，继汪曾祺之后极富人情味和生活智趣的文字。本书精选四十余篇文章，均为近几年被文友和读者广为推崇的口碑作品。高军的文，简洁酣畅，小生活中见大道理，犀利深刻却幽默有趣，调侃间却情致动人。他的作品给人的感受，似乎无论生活在何种年代何种环境，他总能发现与感受到生活的真美意趣。</div>
                                                </div>
                                            </div>
                                            <div class="tabConList-b">
                                                <ul class="tabConList-b-u">
                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cont4">
                                        <div class="tabConList">
                                            <div class="tabConList-t">
                                                <div  class="tabConList-t-l">
                                                    <a href="#"><img src="http://image12.bookschina.com/2018/20180604/s7801339.jpg" alt=""></a>
                                                </div>
                                                <div  class="tabConList-t-r">
                                                    <div class="tabConList-t-r-d1"><a href="#">人间须尽欢</a></div>
                                                    <span class="tabConList-t-r-s1">¥14.9</span><s class="tabConList-t-r-s2">¥45.0</s>
                                                    <div class="tabConList-t-r-d2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;众多读者赞誉“大器晚成的小品文大家”，继汪曾祺之后极富人情味和生活智趣的文字。本书精选四十余篇文章，均为近几年被文友和读者广为推崇的口碑作品。高军的文，简洁酣畅，小生活中见大道理，犀利深刻却幽默有趣，调侃间却情致动人。他的作品给人的感受，似乎无论生活在何种年代何种环境，他总能发现与感受到生活的真美意趣。</div>
                                                </div>
                                            </div>
                                            <div class="tabConList-b">
                                                <ul class="tabConList-b-u">
                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>

                                                    <li class="tabConList-b-l">
                                                        <div class="tabConList-b-l-d"><a href="#"><img src="http://image12.bookschina.com/2019/20190216/1/s7996431.jpg" alt=""></a></div>
                                                        <p class="tabConList-b-l-p"><a href="#">钱锺书交游考-精装/文化学者谢泳作品，致敬大师！</a></p>
                                                        <span>¥17.2</span><s>¥42.0</s>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <script>
                                var ali1 = document.querySelectorAll(".box>ul>li")
                                var adiv1 = document.querySelectorAll(".cont>div")
                            
                                for(var i=0;i<ali1.length;i++){
                                    ali1[i].xuhao = i;
                                    ali1[i].onclick = function(){
                                        for(var j=0;j<ali1.length;j++){
                                            ali1[j].className = "";
                                            adiv1[j].style.display = "none";
                                        }
                                        this.className = "active";
                                        adiv1[this.xuhao].style.display = "block";
                                    }
                                }
                            </script>
                            <!-- ------选项卡---------- -->
                        </div>
                    </div>
                    <div class="content-1-right-bottom-right">
                        <div class="content-1-right-bottom-right-top">
                            <div>图书推荐榜</div>
                            <span><a href="#">更多</a>&gt;&gt;</span>
                        </div>
                        <!-- ------选项卡---------- -->
                        <div class="content-xxk2">
                            <div class="box1">
                                <ul>
                                    <li class="active">总榜</li>
                                    <li>文学</li>
                                    <li>社科</li>
                                    <li>少儿</li>
                                </ul>
                                <div class="cont10">
                                    <div class="cont11">
                                        <ul>
                                            <li>
                                                <i>01</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>02</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>03</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>04</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>05</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>06</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>07</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>08</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>09</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li style="border: none;">
                                                <i>10</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            
                                            
                                        </ul>
                                    </div>
                                    <div class="cont12">
                                        <ul>
                                            <li>
                                                <i>01</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>02</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>03</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>04</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>05</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>06</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>07</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>08</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>09</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li style="border: none;">
                                                <i>10</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            
                                            
                                        </ul>
                                    </div>
                                    <div class="cont13">
                                        <ul>
                                            <li>
                                                <i>01</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>02</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>03</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>04</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>05</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>06</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>07</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>08</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>09</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li style="border: none;">
                                                <i>10</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            
                                            
                                        </ul>
                                    </div>
                                    <div class="cont14">
                                        <ul>
                                            <li>
                                                <i>01</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>02</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>03</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>04</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>05</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>06</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>07</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>08</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li>
                                                <i>09</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            <li style="border: none;">
                                                <i>10</i>
                                                <a href="#">孤独地狱</a>
                                            </li>
                                            
                                            
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <script>
                                var ali = document.querySelectorAll(".box1>ul>li")
                                var adiv = document.querySelectorAll(".cont10 >div")
                                for(var i=0;i<ali.length;i++){
                                    ali[i].xuhao = i;
                                    ali[i].onclick = function(){
                                        for(var j=0;j<ali.length;j++){
                                            ali[j].className = "";
                                            adiv[j].style.display = "none";
                                        }
                                        this.className = "active";
                                        adiv[this.xuhao].style.display = "block";
                                    }
                                }
                            
                            </script>
                        <!-- ------选项卡---------- -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>


    <!-- ----广告------ -->
    <div class="hotSubject floor" >
        <div class="guanggao" id="a3">
            <a href="#"><img src="img/gg1.jpg" alt=""></a>
            <a href="#"><img src="img/gg2.jpg" alt=""></a>
            <a href="#"><img src="img/gg3.jpg" alt=""></a>
            <a href="#"><img src="img/gg4.jpg" alt=""></a>
        </div>
    </div>
    <!-- ------抢购-------- -->
    <div class="tuangou" id="louceng3">
        <div class="tuangou-box">
            <div class="tst">
                <div class="tst-top">
                    <span class="tst-top-left"><a href="#">全场包邮，低至一折，每天上线</a></span><span class="tst-top-right"><a href="#">查看更多商品信息&gt;&gt;</a></span>
                </div>
                <div class="tst-bottom">
                    <div class="tst-bottom-xq">
                        <div class="xq1"><a href="#"><img src="img/xq1.jpg" class="xq1-img" alt=""></a></div>
                        <div class="xq2">超低价16.9元包邮！中国著名英语教育家“薄冰英语”2册，1000组易混淆的近同义</div>
                        <div class="xq3">
                            <span class="xq3-s1">￥16.9</span>
                            <span class="xq3-s2">2.4折</span>
                        </div>
                    </div>

                    <div class="tst-bottom-xq">
                        <div class="xq1"><a href="#"><img src="img/xq1.jpg" class="xq1-img" alt=""></a></div>
                        <div class="xq2">超低价16.9元包邮！中国著名英语教育家“薄冰英语”2册，1000组易混淆的近同义</div>
                        <div class="xq3">
                            <span class="xq3-s1">￥16.9</span>
                            <span class="xq3-s2">2.4折</span>
                        </div>
                    </div>

                    <div class="tst-bottom-xq">
                        <div class="xq1"><a href="#"><img src="img/xq1.jpg" class="xq1-img" alt=""></a></div>
                        <div class="xq2">超低价16.9元包邮！中国著名英语教育家“薄冰英语”2册，1000组易混淆的近同义</div>
                        <div class="xq3">
                            <span class="xq3-s1">￥16.9</span>
                            <span class="xq3-s2">2.4折</span>
                        </div>
                    </div>

                    <div class="tst-bottom-xq">
                        <div class="xq1"><a href="#"><img src="img/xq1.jpg" class="xq1-img" alt=""></a></div>
                        <div class="xq2">超低价16.9元包邮！中国著名英语教育家“薄冰英语”2册，1000组易混淆的近同义</div>
                        <div class="xq3">
                            <span class="xq3-s1">￥16.9</span>
                            <span class="xq3-s2">2.4折</span>
                        </div>
                    </div>

                    <div class="tst-bottom-xq" style="margin-right: 0px;">
                        <div class="xq1"><a href="#"><img src="img/xq1.jpg" class="xq1-img" alt=""></a></div>
                        <div class="xq2">超低价16.9元包邮！中国著名英语教育家“薄冰英语”2册，1000组易混淆的近同义</div>
                        <div class="xq3">
                            <span class="xq3-s1">￥16.9</span>
                            <span class="xq3-s2">2.4折</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="kindFloor" id="louceng4">
        <div class="kindFloor-box">
            <div class="kindFloor-box-top">
                <div class="kindFloor-box-top-d">文学图书&gt;</div>
                <ul class="kindFloor-box-top-u">
                    <li class="kindFloor-box-top-l"><span class="kindFloor-box-top-s">小说</span></li>
                    <li class="kindFloor-box-top-l"><span class="kindFloor-box-top-s">诗歌散文</span></li>
                    <li class="kindFloor-box-top-l"><span class="kindFloor-box-top-s">悬疑推理</span></li>
                    <li class="kindFloor-box-top-l"><span class="kindFloor-box-top-s">青春文学</span></li>
                </ul>
            </div>
            <div class="kindFloor-box-bottom">
                <div class="kindFloor-box-bottom-left">
                    <div class="kindFloor-box-bottom-left-d1" ><img src="img/luxun.jpg" alt="" class="kindFloor-box-bottom-left-s1-i"></div>
                    <div class="kindFloor-box-bottom-left-d2">
                        <h4 class="kindFloor-box-bottom-left-d2-h"><a class="kindFloor-box-bottom-left-d2-h-a">青春文学榜</a></h4>
                        <ul class="kindFloor-box-bottom-left-d2-u">
                            <li class="kindFloor-box-bottom-left-d2-l">&gt;<a href="#" class="llaa">安妮宝贝-春宴</a></li>
                            <li class="kindFloor-box-bottom-left-d2-l">&gt;<a href="#" class="llaa">玩家</a></li>
                            <li class="kindFloor-box-bottom-left-d2-l">&gt;<a href="#" class="llaa">不懂浪漫的男朋友</a></li>
                            <li class="kindFloor-box-bottom-left-d2-l">&gt;<a href="#" class="llaa">阁楼里的女孩</a></li>
                            <li class="kindFloor-box-bottom-left-d2-l">&gt;<a href="#" class="llaa">屡次想起的人</a></li>
                        </ul>
                    </div>
                </div>
                <div class="kindFloor-box-bottom-center">
                    <ul class="kindFloor-box-bottom-center-u">



                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb1.jpg" alt=""></a></div>
                            <h3 class="bookName">陶潜和樱子</h3>
                            <p class="bookAuthor">刘争争</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥12.9</span>
                                <s class="price">￥38.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb2.jpg" alt=""></a></div>
                            <h3 class="bookName">在逃</h3>
                            <p class="bookAuthor">王若虚</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥15.7</span>
                                <s class="price">￥29.8</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb3.jpg" alt=""></a></div>
                            <h3 class="bookName">不朽</h3>
                            <p class="bookAuthor">落落</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥7.0</span>
                                <s class="price">￥22.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb4.jpg" alt=""></a></div>
                            <h3 class="bookName">2条命:世界上狂野</h3>
                            <p class="bookAuthor">看树</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥4.8</span>
                                <s class="price">￥16.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb5.jpg" alt=""></a></div>
                            <h3 class="bookName">誓鸟</h3>
                            <p class="bookAuthor">张悦然</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥9.3</span>
                                <s class="price">￥25.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb6.jpg" alt=""></a></div>
                            <h3 class="bookName">文学少女侦探</h3>
                            <p class="bookAuthor">梁清散</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥9.4</span>
                                <s class="price">￥26.8</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb7.jpg" alt=""></a></div>
                            <h3 class="bookName">我来过你爱过的世</h3>
                            <p class="bookAuthor">夏风颜</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥17.1</span>
                                <s class="price">￥45.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb8.jpg" alt=""></a></div>
                            <h3 class="bookName">310 上海异人故事</h3>
                            <p class="bookAuthor">王莫之</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥12.3</span>
                                <s class="price">￥35.0</s>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="kindFloor-box-bottom-right">
                    <div class="kindFloor-box-bottom-right-top">
                        <ul class="kindFloor-box-bottom-right-top-u">
                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>



                        </ul>
                    </div>
                    <div class="kindFloor-box-bottom-rigth-bottom">
                        <a href="#"><img src="img/dashi.jpg" alt=""></a>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <div class="kindFloor">
        <div class="kindFloor-box">
            <div class="kindFloor-box-top">
                <div class="kindFloor-box-top-d">文学图书&gt;</div>
                <ul class="kindFloor-box-top-u">
                    <li class="kindFloor-box-top-l"><span class="kindFloor-box-top-s">小说</span></li>
                    <li class="kindFloor-box-top-l"><span class="kindFloor-box-top-s">诗歌散文</span></li>
                    <li class="kindFloor-box-top-l"><span class="kindFloor-box-top-s">悬疑推理</span></li>
                    <li class="kindFloor-box-top-l"><span class="kindFloor-box-top-s">青春文学</span></li>
                </ul>
            </div>
            <div class="kindFloor-box-bottom">
                <div class="kindFloor-box-bottom-left">
                    <div class="kindFloor-box-bottom-left-d1" ><img src="http://image31.bookschina.com/pro-images/sbanner/5023774.jpg" alt="" class="kindFloor-box-bottom-left-s1-i"></div>
                    <div class="kindFloor-box-bottom-left-d2">
                        <h4 class="kindFloor-box-bottom-left-d2-h"><a class="kindFloor-box-bottom-left-d2-h-a">历史畅销榜</a></h4>
                        <ul class="kindFloor-box-bottom-left-d2-u">
                            <li class="kindFloor-box-bottom-left-d2-l">&gt;<a href="#" class="llaa">时代笔录</a></li>
                            <li class="kindFloor-box-bottom-left-d2-l">&gt;<a href="#" class="llaa">反映与建构</a></li>
                            <li class="kindFloor-box-bottom-left-d2-l">&gt;<a href="#" class="llaa">天可汗时代</a></li>
                            <li class="kindFloor-box-bottom-left-d2-l">&gt;<a href="#" class="llaa">你所不知道的那些事</a></li>
                            <li class="kindFloor-box-bottom-left-d2-l">&gt;<a href="#" class="llaa">中日恩怨两千年</a></li>
                        </ul>
                    </div>
                </div>
                <div class="kindFloor-box-bottom-center">
                    <ul class="kindFloor-box-bottom-center-u">



                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb1.jpg" alt=""></a></div>
                            <h3 class="bookName">陶潜和樱子</h3>
                            <p class="bookAuthor">刘争争</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥12.9</span>
                                <s class="price">￥38.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb2.jpg" alt=""></a></div>
                            <h3 class="bookName">陶潜和樱子</h3>
                            <p class="bookAuthor">刘争争</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥12.9</span>
                                <s class="price">￥38.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb3.jpg" alt=""></a></div>
                            <h3 class="bookName">陶潜和樱子</h3>
                            <p class="bookAuthor">刘争争</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥12.9</span>
                                <s class="price">￥38.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb4.jpg" alt=""></a></div>
                            <h3 class="bookName">陶潜和樱子</h3>
                            <p class="bookAuthor">刘争争</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥12.9</span>
                                <s class="price">￥38.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb5.jpg" alt=""></a></div>
                            <h3 class="bookName">陶潜和樱子</h3>
                            <p class="bookAuthor">刘争争</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥12.9</span>
                                <s class="price">￥38.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb6.jpg" alt=""></a></div>
                            <h3 class="bookName">陶潜和樱子</h3>
                            <p class="bookAuthor">刘争争</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥12.9</span>
                                <s class="price">￥38.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb7.jpg" alt=""></a></div>
                            <h3 class="bookName">陶潜和樱子</h3>
                            <p class="bookAuthor">刘争争</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥12.9</span>
                                <s class="price">￥38.0</s>
                            </div>
                        </li>

                        <li class="kindFloor-box-bottom-center-l">
                            <div><a href="#"><img class="bookImg" src="img/lb8.jpg" alt=""></a></div>
                            <h3 class="bookName">陶潜和樱子</h3>
                            <p class="bookAuthor">刘争争</p>
                            <div class="pircewrap">
                                <span class="salePirce">￥12.9</span>
                                <s class="price">￥38.0</s>
                            </div>
                        </li>



                    </ul>
                </div>
                <div class="kindFloor-box-bottom-right">
                    <div class="kindFloor-box-bottom-right-top">
                        <ul class="kindFloor-box-bottom-right-top-u">
                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>

                            <li class="kindFloor-box-bottom-right-top-l">&gt;<a href="#" class="kindFloor-box-bottom-right-top-a">中国当代杂文精品大系</a></li>



                        </ul>
                    </div>
                    <div class="kindFloor-box-bottom-rigth-bottom">
                        <a href="#"><img src="img/dashi.jpg" alt=""></a>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <!-- --------底部-------- -->
    <div class="bottom-box floor" >
    </div>
   

</body>
<script src="./libs/jquery.js"></script>
<script>
    // 顶部提醒
    $(".caution").load("http://localhost:3000/public/public_index.html .cautionioc")

    // 开始动画
    $(".imgTop").load("http://localhost:3000/public/public_index.html .imgTop-box",function(){
        setTimeout(function(){
            console.log("这是三秒以后");
            $(".imgTop-box").animate({
                height : 100,
            }, 1000);
            $(".i1").animate({
                opacity: 'show'
            }, 1000);
            $(".i2").animate({
                height : 100, opacity: 'hide'
            }, 1000);
        },3000)
    })

    // 登录注册
    $(".topBar").load("http://localhost:3000/public/public_index.html .zhuce",function(){
        const zhanghu = document.getElementById("zhanghu");
        const zhul = document.querySelector(".zhul");
        zhanghu.onmouseenter = function(){
            console.log("yiru");
            zhul.style.display = "block";
            zhanghu.style.background = "#fff"
            zhanghu.style.border = "1px solid black"
            zhanghu.style.borderBottom = "none"
            zhanghu.style.borderTop = "none"
        }
        zhanghu.onmouseleave = function(){
            console.log("yichu");
            zhul.style.display = "none";
            zhanghu.style.background = "#f2f2f2"
            zhanghu.style.border = "none"
        }
        zhul.onmouseenter = function(){
            console.log("yiru");
            zhul.style.display = "block";
            zhanghu.style.background = "#fff"
            zhanghu.style.border = "1px solid black"
            zhanghu.style.borderBottom = "none"
            zhanghu.style.borderTop = "none"
        }
        zhul.onmouseleave = function(){
            console.log("yichu");
            zhul.style.display = "none";
            zhanghu.style.background = "#f2f2f2"
            zhanghu.style.border = "none"
        }

        //-------以下为登录注册行新加js

        if(localStorage.getItem("token") === "ok"){
            $(".loginArea").hide();
            $(".loginArea1").show().children("span").html(localStorage.getItem("uname"))
        }else{
            $(".loginArea1").hide();
            $(".loginArea").show();
        }

        $(".loginArea1-s2").click(function(){
            $(".loginArea1").hide();
            $(".loginArea").show();
            localStorage.setItem("token","no")
        })

        $(".zhanghu").click(function(){
            if(localStorage.getItem("token") === "ok"){
                $(".loginArea").hide();
                $(".loginArea1").show().children("span").html(localStorage.getItem("uname"))
            }else{
                if(confirm("您还未登录，是否前往登录？")){
                    location.href="./logon.html"
                    // location.href=window.location.href
                }
                return false;
            }
        })
    })

    // logo行
    $(".searchBar").load("http://localhost:3000/public/public_index.html .searchBarFixed",function(){
        const otxt = document.getElementById("search");
        const obtn = document.querySelector(".s4");
        const oul = document.querySelector(".list");

        // 点击按钮，跳转到真实的百度搜索
        obtn.onclick = function(){
            location.href = "https://www.baidu.com/s?wd=" + otxt.value;
        }

        otxt.oninput = function(){
            
            // 判断输入框是否为空，为空，清除下拉菜单
            if(this.value === "") oul.innerHTML = "";
            oul.style.display = "block"
            // console.log(this.value)
            // 开启jsonp请求，请求百度数据
            jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",function  (res){
                // 请求成功后，处理数据
                // console.log(res.s);
                let str = "";
                // 拼接页面结构
                for(let i=0;i<res.s.length;i++){
                    str += `<li>${res.s[i]}</li>`
                }
                // 渲染页面
                // console.log(str)
                oul.innerHTML = str;
            
            
                oul.onmouseover = function(eve){
                    const e = eve?eve:window.event;
                    const tag = e.target || ev.srcElement;
                    // console.log(tag.nodeName);
                    if(tag.nodeName == "LI"){
                        tag.style.color = "red";
                        // console.log(tag.innerHTML);
                        tag.onclick = function(){
                            otxt.value = tag.innerHTML;
                            oul.style.display="none";
                        }
                    }
                }
                oul.onmouseout = function(eve){
                    const e = eve?eve:window.event;
                    const tag = e.target || ev.srcElement;
                    // console.log(tag.nodeName);
                    if(tag.nodeName == "LI"){
                        tag.style.color = "black";
                    }
                }
            },{
                wd:this.value,
                cb:"ajshdfgausdf",
                selfName:"cb"
            })
        }
        function jsonp(url,cb,data){
            let str = "";
            for(let i in data){
                str += `${i}=${data[i]}&`
            }
            url += "?" + str + "_qft_=" + Date.now();
            const script = document.createElement("script");
            script.src = url;
            document.body.appendChild(script);
            window[data[data.selfName]] = function(res){
            cb(res);
        }
        }
    })
        
    //导航栏
    $(".nav").load("http://localhost:3000/public/public_index.html .nav1")

    //底部
    $(".bottom-box").load("http://localhost:3000/public/public_index.html .bottom")
</script>
</html> 